Индивидуальное задание

Рисование графических примитивов средствами JavaScript

Выполнил Раскин В.А.

В качестве индивидуального задания представлен набор функций, позволяющих рисовать графичие примитивы с использованием только стандартных возможностей JavaScript и объектной модели документа DOM.

Поддерживаются следующие фигуры: квадрат, вертикальная и горизонтальные линии, и инструмент карандаш.

Для отрисовки указанных примитивов необходимо выбрать тип фигуры, цвет ее заливки и контура, а затем, удерживая нажатой левую кнопку мыши в рабочей области, нарисовать выбранную фигуру.

Приведенный пример призван продемонстрировать дополнительные возможности создания интерактивного интерфейса в Веб приложениях. Данный подход может быть полезен, в случае обеспечения графического отображения данных без использования дополнительных надстроек браузера (Flash Player, SVG Viewer).

В отличии от стандартных средств построения графических изображений в браузере, таких как Shockwave Flash и Scalable Vector Graphics (SVG), для отображения результатов требуется лишь наличие браузера, поддерживающего объектную модель документа DOM и язык сценариев JavaScript.

Для реализации данного примера использован подход DOM, при котором Веб страница представлена в виде древовидной структуры объектов, обладающих набором свойств и методов. Каждый элемент страницы (DIV, BODY, HEAD, TABLE, P и т.д.) является объектом. При реализации функций рисования использовался элемент DIV, его абсолютное позиционирование, цвет контура, цвет заливки и размеры а также обработка событий мыши.

Недостатком данного подхода является тот факт, что для создания одной точки, прямоугольника и линии используется один и тот же объект DIV и, соответственно, выделяется одинаковое количество памяти. Следствием этого является заметное замедление работы браузера при использовании инструмента "карандаш". Данный подход не рекомендуется использовать для отрисовки сложных кривых, графиков функций.

Приведенный подход планируется использовать для реализации клиентской части программного обеспечения, разрабатываемого в рамках магистерской работы. То есть для соединения элементов в блок-схеме алгоритма и функциональной схеме.

Цвет заливки Цвет контура Инструмент